<template>
  <div>
    <h1>App</h1>
    <!-- 
      1. 绑定事件
        @xxx="xxx"
    -->
    <!-- <Child :name="person.name" :age="person.age" @setAge="setAge" /> -->
    <!-- <Child :name="person.name" :age="person.age" @setAge="person.age++" /> -->
    <!-- 
      $event 代表事件回调函数的第一个参数
        之前原生DOM事件，事件回调函数的第一个参数是event对象，所有$event的值是event
        现在自定义事件，触发事件传递的第一个参数，就是$event的值
    -->
    <Child :name="person.name" :age="person.age" @setAge="person.age += $event" />
    <!-- 
      所有给组件绑定的事件，默认都是自定义事件
      当给自定义事件加上事件修饰符 .native，绑定就是DOM事件 
        给子组件根标签绑定的DOM事件
     -->
    <!-- <Child :name="person.name" :age="person.age" @click="setAge(2)" /> -->
    <!-- <Child :name="person.name" :age="person.age" @click.native="setAge(2)" /> -->
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  name: "App",
  data() {
    return {
      person: {
        name: "静哥",
        age: 38,
      },
    };
  },
  methods: {
    setAge(num) {
      this.person.age += num;
    },
  },
  components: {
    Child,
  },
};
</script>

<style></style>
